<template>
	<view class="goods-container">
		<!-- 搜索栏 -->
		<uni-search-bar v-model="medicinesName" placeholder="请输入药品名称" @confirm="search(medicinesName)" />

		<!-- 分类筛选 -->
		<view class="category-filter">
			<scroll-view scroll-x class="scroll-view">
				<view v-for="(item, index) in categories" :key="index" class="category-item"
					:class="{'active': activeCategory === index}" @click="changeCategory(index,item.medicinesType)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

		<!-- 药品列表 -->
		<view class="goods-list">
			<uni-card v-for="(item, index) in goodsList" :key="index" @click="goGoodsDetail(item.medicinesId)" class="goods-card">
				<view class="goods-content">
					<image :src="item.medicinesImg" class="goods-image" />
					<view class="goods-info">
						<text class="goods-name"><text v-if="item.isOtc == 0" class="otc-tag">OTC</text><text
								v-if="item.isOtc == 1" class="prescription-tag">处方药</text>{{item.medicinesName}}</text>
						<text class="goods-desc">{{item.effect}}</text>
						<view class="goods-price">
							<text class="price">¥{{(item.prescriptionPrice).toFixed(1)}}</text>
							<text class="manufacturer">{{templateByProducterId(item.producterId)}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		listMedicines,
		listMedicinesByName,
		listMedicinesByType
	} from '@/api/medicines/index.js'
	import {
		listGoodType
	} from '@/api/goodsType/index.js'
	import {
		listProducter
	} from '@/api/producter/index.js'
	export default {
		data() {
			return {
				medicinesName: '',
				activeCategory: 0,
				//'全部', '感冒发烧', '肠胃消化', '心脑血管', '皮肤用药', '儿童用药'
				categories: [],
				goodsList: [],
				producterList: []
			}
		},
		methods: {
			search(medicinesName) {
				if (medicinesName) {
					listMedicinesByName(medicinesName).then(res => {
						this.goodsList = res.data
					})
				} else {
					this.getGoodsList()
				}
			},
			changeCategory(index, medicinesType) {
				this.activeCategory = index;
				if (index == 0) {
					this.getGoodsList()
				} else {
					this.getGoodsListByType(medicinesType)
				}
			},
			getGoodsList() {
				listMedicines().then(res => {
					this.goodsList = res.data
				})
			},
			goGoodsDetail(medicinesId) {
				uni.navigateTo({
					url: '/pages/goods/detail?medicinesId='+medicinesId
				});
			},
			getGoodsListByName(medicinesName) {
				listMedicinesByName(medicinesName).then(res => {
					this.goodsList = res.data
				})
			},
			getGoodsListByType(type) {
				listMedicinesByType(type).then(res => {
					this.goodsList = res.data
				})
			},
			getGoodsType() {
				const newObject = {
					id: 0,
					name: '全部'
				};

				listGoodType().then(res => {
					this.categories = res.data
					// 使用 splice 方法添加对象
					this.categories.splice(0, 0, newObject);
				})
			},
			//获取所有的生产商信息
			getProducter() {
				listProducter().then(res => {
					this.producterList = res.data
				})
			},
			//翻译生产商ID
			templateByProducterId(id) {
				for (let i = 0; i < this.producterList.length; i++) {
					if (this.producterList[i].producterId == id) {
						return this.producterList[i].producterName
					}
				}
			},
		},
		onLoad(options) {
			this.getProducter()
			this.getGoodsType()
			if (options.medicinesType) {
				this.getGoodsListByType(options.medicinesType)
			} else if(options.medicinesName){
				this.getGoodsListByName(options.medicinesName)
			}else{
				this.getGoodsList()
			}
		},
	}
</script>

<style lang="scss">
	.goods-container {
		padding: 20rpx;
	}

	.category-filter {
		margin: 15rpx 12px;

		.scroll-view {
			white-space: nowrap;
		}

		.category-item {
			display: inline-block;
			padding: 10rpx 30rpx;
			margin-right: 20rpx;
			border-radius: 30rpx;
			background-color: #f5f5f5;
			color: #666;
			font-size: 28rpx;

			&.active {
				background-color: #0EB6FD;
				color: #fff;
			}
		}
	}

	.goods-list {
		.goods-card {
			margin-bottom: 20rpx;

			.goods-content {
				display: flex;

				.goods-image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}

				.goods-info {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.goods-name {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						display: flex;
						align-items: center;
						line-height: 1.5;
					}

					.goods-desc {
						font-size: 26rpx;
						color: #999;
						overflow: hidden;
						/* 隐藏超出部分的内容 */
						text-overflow: ellipsis;
						/* 将超出部分显示为省略号 */
					}

					.goods-price {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-direction: column;

						.price {
							font-size: 36rpx;
							color: #F66586;
							font-weight: bold;
						}

						.manufacturer {
							font-size: 24rpx;
							color: #999;
						}

						.buy-btn {
							background-color: #0EB6FD;
							color: #fff;
							font-size: 28rpx;
							padding: 0 30rpx;
							border-radius: 30rpx;
							height: 60rpx;
							line-height: 60rpx;
						}
					}

					.otc-tag {
						background-color: #0EB6FD;
						color: #fff;
						font-size: 20rpx;
						padding: 2rpx 6rpx;
						border-radius: 4rpx;
						margin-right: 8rpx;
						display: inline-flex;
						align-items: center;
						height: 32rpx;
					}

					.prescription-tag {
						background-color: #F66586;
						color: #fff;
						font-size: 20rpx;
						padding: 2rpx 6rpx;
						border-radius: 4rpx;
						margin-right: 8rpx;
						display: inline-flex;
						align-items: center;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>